import { initState } from "./state"
import { compileToFunction } from './compiler/index'
import { callHook, mountComponent } from "./lifecycle"
import { mergeOptions } from "./utils"
// import { callHook } from "./lifecycle"

export function initMixin(Vue) {

    Vue.prototype._init = function (options) {
        const vm = this
        // 全局指令和过滤器都会挂载到实例上
        vm.$options = mergeOptions(this.constructor.options, options)//用户选项挂载到实例上（全局options,options）
        // debugger
        // console.log(vm.$options)
        callHook(vm, 'beforeCreate')
        initState(vm)//使得data里的数据具有响应式
        callHook(vm, 'created')

        // console.log(options.el,'el')
        if (options.el) {// options中有el挂el
            // debugger
            vm.$mount(options.el)
        }
        // debugger
    }

    Vue.prototype.$mount = function (el) {
        const vm = this// Vue
        el = document.querySelector(el)
        let ops = vm.$options
        if (!ops.render) {// 没render
            let template
            if (!ops.template && el) {// 没模板有el
                template = el.outerHTML
            } else {
                if (el) {
                    template = ops.template//有el 采用模板
                }
            }
            // console.log(template)
            if (template) {
                const render = compileToFunction(template)
                ops.render = render
            }
        }
        // console.log(ops.render)

        mountComponent(vm, el)

    }

}